<template>
  <view class="">
    <!-- <uni-nav-bar shadow statusBar="true" fixed="true" title="先航软件"/> -->
    <!--    <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
          <text class="title">Hello dx</text>
        </view> -->
    <view class="header-section"></view>

    <view class="content-section">
      <!-- <view class="margin kanbanopt">
        <view class="align-center flex">
          <view class="bluebar"></view>
          <view>数据概况</view>
        </view>
        <view style="display: flex;">
          <view class="flex-sub text-center">
            <view class="text margin">
              <text class="pt">今日产量</text>
            </view>
            <view class="margin-bottom">
              <text class="pv">0</text>条
            </view>
            <view>
              <text class="pv">0</text>kg
            </view>
          </view>
          <view class="flex-sub text-center">
            <view class="text margin">
              <text class="pt">本月产量</text>
            </view>
            <view class="margin-bottom">
              <text class="pv">0</text>条
            </view>
            <view>
              <text class="pv">0</text> kg
            </view>
          </view>
          <view class="flex-sub text-center">
            <view class="text margin">
              <text class="pt">当前库存</text>
            </view>
            <view class="margin-bottom">
              <text class="pv">0</text>条
            </view>
            <view>
              <text class="pv">0</text>kg
            </view>
          </view>
        </view>
      </view> -->

      <view class="margin kanbanopt">
        <view class="align-center flex">
          <view class="bluebar"></view>
          <view>当前机台状态</view>
        </view>
        <view class="flex margin-xs">
          <view class="flex-sub text-center">
            <text class="pt">总数：</text>
            <text class="pv">{{ allNum }}</text>
            台
          </view>
          <view class="flex-sub text-center">
            <text class="pt">运行：</text>
            <text class="pv">{{ startNum }}</text>
            台
          </view>
        </view>
        <view class="flex margin-xs">
          <view class="flex-twice text-center">
            <text class="pt">停机：</text>
            <text class="pv">{{ stopNum }}</text>
            台
          </view>
          <view class="flex-twice text-center">
            <text class="pt">离线：</text>
            <text class="pv">{{ onlineNum }}</text>
            台
          </view>
        </view>
      </view>

<!--      <view class="margin kanbanopt">-->
<!--        <view class="align-center flex">-->
<!--          <view class="bluebar"></view>-->
<!--          <view>近7日效率趋势</view>-->
<!--        </view>-->
<!--        <view class="charts-box">-->
<!--          <qiun-data-charts type="column" :opts="opts" :chartData="chartData"/>-->
<!--        </view>-->
<!--      </view>-->

    </view>
    <watermark :text="userName"></watermark>
  </view>
</template>

<script>
import watermark from '../components/warter/watermark.vue'
import {
  getStaNum,
  getStaByWeek
} from '@/api/company/device.js'

export default {
  components: {
    watermark
  },
  data() {
    return {
      userName: this.$store.getters.name,
      chartData: {},
      stopNum: 0,
      startNum: 0,
      onlineNum: 0,
      allNum: 0,	
	  opts: {
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [15,15,0,5],
			enableScroll: false,
			legend: {},
			xAxis: {
			  disableGrid: true,
			  fontSize: 10
			},
			yAxis: {
			  showTitle: true,
			  data: [
				{
				  min: 0,
				  unit:'%',
				  title:'单位：%',
				  fontSize: 10
				}
			  ]
			},
			extra: {
			  column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			  }
			}
		},
    };
  },
  onShow() {
    // this.getServerData();
    this.getStaData()
  },
  methods: {
    /**
     * 机台状态统计数据
     */
    getStaData() {
      let query = {
        companyId: this.$store.getters.companyId
      }
      getStaNum(query).then(res => {
        this.stopNum = res.data.stop
        this.startNum = res.data.start
        this.onlineNum = res.data.online
        this.allNum = res.data.allNum
      })
    },
    getServerData() {
      let chartData = {
        categories: [],
        series: []
      }
      let tmp = {
        name: '效率',
        data: []
      }
				getStaByWeek().then(res => {
          res.data.forEach(item => {
            chartData.categories.push(item.date)
            tmp.data.push(item.score)
          })
          chartData.series.push(tmp)
        })
				console.log(chartData)
				this.chartData = chartData;
			},
		},
	}
</script>

<style scoped>
.header-section {
  padding: 15px 15px 45px 15px;
  background-color: #3c96f3;
  color: white;
}

.content-section {
  position: relative;
  top: -50px;
}

.kanbanopt {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 15rpx;
}

.bluebar {
  background-color: #2979ff;
  width: 8rpx;
  height: 24rpx;
  border-radius: 4rpx;
  margin: 0 10rpx;
}

.pv {
  font-weight: bold;
  margin-right: 6rpx;
}

.pt {
  color: grey;
}
</style>
